iT邦幫忙

2021 iThome 鐵人賽

DAY 15
1
Modern Web

ASP.NET Web Forms 入門 - 30天建立遊艇網頁專案後端及後台功能 C#系列 第 15

Day 15 - 將 COMPANY 後台儲存資料提取後,送至 Certificat 前台渲染畫面 - 相簿資料渲染 - ASP.NET Web Forms C#

  • 分享至 

  • xImage
  •  

=x= 🌵 COMPANY - Certificat 前台頁面後端功能製作。


COMPANY - Certificat 頁面資料介紹 :

📌 Certificat 頁面內容分為 : 文字區直式並排圖片區橫式並排圖片區

1. 文字區 - 資料庫內容 : 單純文字物件。

2. 直式並排圖片區 - 資料庫內容 : JSON 格式文字物件。

3. 橫式並排圖片區 - 資料庫內容 : JSON 格式文字物件。

  • 🌵 製作時要把 JSON 格式反序列化為 List 才能使用。

https://ithelp.ithome.com.tw/upload/images/20210929/20139487CbsrkHIPJ8.jpg



COMPANY 頁面 - Certificat 內容後端實作 :

1. 新增 company1.aspx 將原始 company1.html 的 <head><body> 內的內容分別複製到 .aspx 檔案中。


2. 刪除與 VIEWSTATE 有關的程式碼。


3. 使用取代功能將 .html 都取代為 .aspx 。

  • 👀 以上操作可參考 Day 9 文章內容。


4. 這裡因為內容拆成3個區塊,所以需要3個 Literal 控制項來接收

https://ithelp.ithome.com.tw/upload/images/20210929/20139487jlHFkQR3RF.jpg


5. 後端 company1.aspx.cs 的 Page_Load 事件加入以下方法

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack) {
        loadContentText();
        loadContentImgV();
        loadContentImgH();
    }
}


6. 建立讀取文字內容 loadContentText(); 方法

private void loadContentText()
{
    //從資料庫取內文資料
    SqlConnection connection = new SqlConnection(WebConfigurationManager.ConnectionStrings["TayanaYachtConnectionString"].ConnectionString);
    string sqlCountry = "SELECT TOP 1 certificatContent FROM Company";
    SqlCommand command = new SqlCommand(sqlCountry, connection);
    connection.Open();
    SqlDataReader reader = command.ExecuteReader();
    if (reader.Read()) {
        //渲染畫面
        ContentText.Text = reader["certificatContent"].ToString();
    }
    connection.Close();
}


7. 建立讀取直式圖片內容 loadContentImgV(); 方法

private void loadContentImgV()
{
    //會重複添加內容所以用 StringBuilder 效能較好
    StringBuilder ImgVHtml = new StringBuilder();
    //用 List<T> 來存取 JSON 格式圖片檔名
    List<ImagePathV> savePathListV = new List<ImagePathV>();
    //從資料庫取出直式圖檔檔名
    SqlConnection connection = new SqlConnection(WebConfigurationManager.ConnectionStrings["TayanaYachtConnectionString"].ConnectionString);
    string sqlLoad = "SELECT TOP 1 certificatVerticalImgJSON FROM Company";
    SqlCommand command = new SqlCommand(sqlLoad, connection);
    connection.Open();
    SqlDataReader reader = command.ExecuteReader();
    if (reader.Read()) {
        string loadJson = HttpUtility.HtmlDecode(reader["certificatVerticalImgJSON"].ToString());
        //反序列化JSON格式
        savePathListV = JsonConvert.DeserializeObject<List<ImagePathV>>(loadJson);
    }
    connection.Close();
    // ?. 可用來判斷不是 Null 才執行 Count
    if (savePathListV?.Count > 0) {
        foreach (var item in savePathListV) {
            ImgVHtml.Append($"<li><p><img src='images/{item.SaveName}' alt='Tayana ' /></p></li>");
        }
    }
    //渲染畫面
    ContentImgV.Text = ImgVHtml.ToString();
}

// JSON 資料 V 直式
public class ImagePathV
{
    public string SaveName { get; set; }
}


8. 建立讀取橫式圖片內容 loadContentImgH(); 方法

private void loadContentImgH()
{
    //會重複添加內容所以用 StringBuilder 效能較好
    StringBuilder ImgHHtml = new StringBuilder();
    //用 List<T> 來存取 JSON 格式圖片檔名
    List<ImagePathH> savePathListH = new List<ImagePathH>();
    //從資料庫取出橫式圖檔檔名
    SqlConnection connection = new SqlConnection(WebConfigurationManager.ConnectionStrings["TayanaYachtConnectionString"].ConnectionString);
    string sqlLoad = "SELECT TOP 1 certificatHorizontalImgJSON FROM Company";
    SqlCommand command = new SqlCommand(sqlLoad, connection);
    connection.Open();
    SqlDataReader reader = command.ExecuteReader();
    if (reader.Read()) {
        string loadJson = HttpUtility.HtmlDecode(reader["certificatHorizontalImgJSON"].ToString());
        //反序列化JSON格式
        savePathListH = JsonConvert.DeserializeObject<List<ImagePathH>>(loadJson);
    }
    connection.Close();
    // ?. 可用來判斷不是 Null 才執行 Count
    if (savePathListH?.Count > 0) {
        foreach (var item in savePathListH) {
            ImgHHtml.Append($"<li><p><img src='images/{item.SaveName}' alt='Tayana ' width='319px' height='234px' /></p></li>");
        }
    }
    ContentImgH.Text = ImgHHtml.ToString();
}

// JSON 資料 H 直式
public class ImagePathH
{
    public string SaveName { get; set; }
}
  • 🌵 記得帶入原本頁面 HTML 編碼裡橫式圖片就有額外設定的寬高尺寸。


9. 模擬頁面檢查是否正確呈現,完成~



本日總結 :

📢 昨天跟今天的 COMPANY 頁面,因為有兩個獨立的內容,所以可以完整的練習到,需要拆解分類的畫面,以及只要一口氣送出全部的畫面,認真覺得如果沒有先練習這些,很難直接去挑戰 NEWS 頁跟 Yachts 頁的內容,建議大家要真的搞懂 COMPANY 頁包含後台實作的內容,對後續頁面的製作來說非常實用。

  • 明日將介紹製作 Calendar 日曆功能應用的相關細節。

上一篇
Day 14 - 將 COMPANY 後台儲存資料提取後,送至 About Us 前台渲染畫面 - 文字編輯器資料渲染 - ASP.NET Web Forms C#
下一篇
Day 16 - 依 NEWS 前台頁面分析拆解後,逐步建立後台功能 (上) - Calendar 日曆功能應用 - ASP.NET Web Forms C#
系列文
ASP.NET Web Forms 入門 - 30天建立遊艇網頁專案後端及後台功能 C#30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言